//
//  HarizontalStackView.swift
//  SwiftUI-CTao
//
//  Created by 涛 on 2019/9/17.
//  Copyright © 2019 涛. All rights reserved.
//

import SwiftUI

struct HorizontalStackView: View {
    
    @State var alignment: VerticalAlignment = .top
    var body: some View {
        VStack {
            HStack(alignment: alignment, spacing: 15, content: {
                
                Text("top:顶部对齐 bottom:底部对齐 center:中间对齐")

                Text("firstTextBaseline、lastTextBaseline:文本第一行、最后一行对齐布局")

                    Text("修改属性查看效果")

                })
            
            Divider()
            
            HStack(alignment: alignment, spacing: 15, content: {
                
                Image("1")
                .resizable()
                    .frame(width: 60, height: 60)
                    .scaledToFit()
                
                Image("2")
                .resizable()
                .frame(width: 60, height: 30)
                .scaledToFit()
                
                Image("3")
                .resizable()
                .frame(width: 60, height: 45)
                .scaledToFit()
                }
            )
            
            Divider()
            HStack(alignment: alignment, spacing: 15, content: {
                
                Image("4")
                .resizable()
                    .frame(width: 60, height: 60)
                    .scaledToFit()
                
                Button(action: {}) {
                    Text("看效果")
                }
                Text("修改属性查看效果,修改属性查看效果")
            }
            )
            
            Spacer()
            Text("试试下面的按钮⬇️")
            
            HStack {
                Button(action: {self.alignment = .top}) {
                    Text("top")
                }
                Button(action: {self.alignment = .bottom}) {
                    Text("bottom")
                }
                Button(action: {self.alignment = .center}) {
                    Text("center")
                }
                Button(action: {self.alignment = .firstTextBaseline}) {
                    Text("firstTextBaseline")
                }
                Button(action: {self.alignment = .lastTextBaseline}) {
                    Text("lastTextBaseline")
                }
            }
        }
            .navigationBarTitle("声明组合水平布局")
    }
}

struct HorizontalStackView_Previews: PreviewProvider {
    static var previews: some View {
        HorizontalStackView()
    }
}
